<template>
	<div>
		<div class="helptitle">
			<div class="helptitle_left">
				<img :src="$url+icon" alt="">
				<div>
					<span>{{name}}</span>--帮助中心
				</div>
			</div>

			<!-- <div class="add_btn"></div> -->
			<div class="helpadd sear_btns" @click="openadd" v-if="uname=='admin'">
				<img src="@assets/images/add2.png" alt="">
				添加
			</div>
		</div>

		<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
		<div class="helplist" v-else>
			<div class="helplist_li" v-for="item,index in list">
				<div class="helplist_li_left" @click=";getinfo(item.detailId,index);infoshow=true">
					<img :src="$url+item.picUrl" alt="">
					<div class="helplist_text">
						<div class="helplist_title">{{item.title}}</div>
						<div class="helplist_info">{{item.profile}}</div>
					</div>
				</div>
				<div class="helplist_li_right" v-if="uname=='admin'">
					<div @click="edit(index)"><img src="@assets/images/edit.png" alt=""></div>
					<div @click="delal=true;helpid=item.id"><img src="@assets/images/helpdel.png" alt=""></div>
				</div>
			</div>

			<div class="page_box">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="inglen">
				</el-pagination>
			</div>
		</div>

		<div class="zzc" style="z-index: 4006;" v-if="infoshow" @click.stop="helpid='';infoshow=false">
			<div class="helpalert">
				<div class="alert_title">
					<div class="alert_title_left">
						<div class="cur"></div>
						<div>帮助中心</div>
					</div>
					<div class="alert_title_right" @click.stop="helpid='';infoshow=false">
						<img src="@assets/images/close.png" alt="">
					</div>
				</div>
				<div class="alert_main">
					<div class="alert_main_title">{{info.title}}</div>
					<div v-html="html"></div>
				</div>
			</div>
		</div>

		<el-dialog title="删除" :visible.sync="delal" style="margin-top: 25vh;">
			<div>确认是否删除</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="del">确 定</el-button>
				<el-button @click="delal = false">取 消</el-button>
			</div>
		</el-dialog>

		<div class="zzc" v-if="dialogFormVisible">
			<div class="addalert">
				<div class="modal-header tit">
					<em></em>{{helpid?'编辑':'添加'}}
					<div class="right" @click="dialogFormVisible=false;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<!--表单-->
				<div class="almain">
					<el-form>
						<el-form-item label="图片" label-width="40px" class="pic_l"
							style="width: 74%;margin: 0 auto 22px;">
							<el-upload class="avatar-uploader" :data="{project:'gd'}" :action="$url+'/file/upload'"
								:headers="{'Authorization':token}" :show-file-list="false"
								:on-success="handleAvatarSuccess">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<div v-else class="avatarbox">
									<i class="el-icon-plus avatar-uploader-icon"></i>
								</div>

							</el-upload>
						</el-form-item>


						<el-form-item label="标题" label-width="40px" style="width: 74%;margin: 0 auto 22px;">
							<el-input autocomplete="off" placeholder="请输入标题" v-model="info.title"></el-input>
						</el-form-item>
						<el-form-item label="简介" label-width="40px" style="width: 74%;margin: 0 auto 22px;">
							<el-input autocomplete="off" placeholder="请输入简介" v-model="info.profile"></el-input>
						</el-form-item>
						<div class="editor—wrapper">
							<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
								:defaultConfig="toolbarConfig" :mode="mode" />
							<Editor v-model="html" :defaultConfig="editorConfig" ref="edi" :mode="mode"
								@onChange="onChange" style="max-height:300px;min-height:200px;overflow-y: scroll;"
								@onCreated="onCreated" />
						</div>

					</el-form>
				</div>

				<div class="alfoot">
					<el-button type="primary" @click="sub()">确 定</el-button>
					<el-button @click="preview">预 览</el-button>
				</div>
			</div>
		</div>


		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script>
	// import {
	// 	Editor,
	// 	Toolbar
	// } from '../assets/js/index.js'
	// import {
	// 	IDomEditor
	// } from '../assets/js/index.js'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	// import {
	// 	IDomEditor
	// } from '@wangeditor/editor'
	export default {
		name: "",
		components: {
			Editor,
			Toolbar
		},
		data() {
			return {
				id: '',
				name: '',
				icon: '',
				helpid: "",
				uname: sessionStorage.getItem('uname'),
				token: "",
				infoshow: false,
				delal: false,
				showloading: false,
				dialogFormVisible: false,
				imageUrl: '',
				info: {
					title: "",
					profile: "",
					picUrl: "",
					html: "",
					content: "",
					typeId: this.id,
					iconId: "",
				},
				editor: null,
				html: '',
				toolbarConfig: {

				},
				list: [],
				editorConfig: {
					placeholder: '请输入内容...',
					scroll: true,
					MENU_CONF: {}
				},
				mode: 'default', // or 'simple'
				page: 1,
				inglen: "",
				num: "",
				limit: 10
			}
		},
		watch: {
			$route() {
				this.id = this.$route.query.id
				this.name = this.$route.query.name
				this.icon = this.$route.query.icon
				this.page = 1
				this.list = []
				if (this.id) {
					this.getlist()
				}
			},
		},
		mounted() {
			this.init()
			this.token = sessionStorage.getItem('token')
			this.id = this.$route.query.id
			this.name = this.$route.query.name
			this.icon = this.$route.query.icon

			this.getlist()
			this.$forceUpdate()
		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		},
		methods: {
			openadd() {
				this.dialogFormVisible = true
				this.imageUrl = ''
				this.info = {
					title: "",
					profile: "",
					picUrl: "",
					html: "",
					content: "",
					typeId: this.id,
					iconId: "",
					detailId: "",
				}
				this.html = ''
				this.helpid = ''
			},
			edit(index) {
				this.helpid = this.list[index].id
				this.dialogFormVisible = true;
				this.getinfo(this.list[index].detailId, index)
			},
			getinfo(id, index) {
				var that = this
				this.$http.get(this.$url + '/help/get/detail?detailId=' + id)
					.then(function(response) {
						that.showloading = false
						if (response.data.success) {
							that.html = response.data.data.html
							that.imageUrl = that.$url + that.list[index].picUrl
							that.info.content = response.data.data.content
							that.info = {
								title: that.list[index].title,
								profile: that.list[index].profile,
								picUrl: that.list[index].picUrl,
								html: response.data.data.html,
								content: response.data.data.content,
								typeId: that.id,
								iconId: that.list[index].iconId,
								detailId: that.list[index].detailId,
							}

							that.$forceUpdate()
						}

					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			onChange(editor) {
				console.log(editor.children)
				console.log(this.editor)
				this.info.content = JSON.stringify(editor.children)
				// this.info.content = this.editor.getText()
			},
			preview() {
				// this.dialogFormVisible = false
				this.infoshow = true
			},
			init() {

				this.editorConfig.MENU_CONF['uploadImage'] = {
					server: this.$url + '/file/wangeditor/upload',
					meta: {
						project: 'gd'
					},
					headers: {
						'Authorization': sessionStorage.getItem('token')
					},
					fieldName: 'file',
					onSuccess(file, res) { // TS 语法
						// onSuccess(file, res) {          // JS 语法
						console.log(`${file.name} 上传成功`, res)
					},

					// 单个文件上传失败
					onFailed(file, res) { // TS 语法
						// onFailed(file, res) {           // JS 语法
						console.log(`${file.name} 上传失败`, res)
					},

					// 上传错误，或者触发 timeout 超时
					onError(file, err, res) { // TS 语法
						// onError(file, err, res) {               // JS 语法
						console.log(`${file.name} 上传出错`, err, res)
					},
				}
			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
				console.log(this.editor)
				this.$forceUpdate()
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				this.info.picUrl = res.data.relativePath;
				this.info.iconId = res.data.id;
			},
			sub() {
				// console.log(this.helpid)
				// return
				this.showloading = true
				if (this.info.title == '' || this.info.picUrl == '' || this.html == '' || this.info.profile == '') {
					this.$Toast('请填写完整');
					return
				}
				var that = this
				var param = {}
				var url = ''
				if (this.helpid) {
					param = {
						id: this.helpid,
						title: this.info.title,
						profile: this.info.profile,
						picUrl: this.info.picUrl,
						html: this.html,
						content: this.info.content,
						typeId: this.id,
						iconId: this.info.iconId,
						detailId: this.info.detailId,
						// detailId: 26,
					}
					url = '/help/edit'
				} else {
					param = {
						title: this.info.title,
						profile: this.info.profile,
						picUrl: this.info.picUrl,
						html: this.html,
						content: this.info.content,
						typeId: this.id,
						iconId: this.info.iconId,
					}
					url = '/help/add'
				}
				// console.log(param)

				// return
				this.$http.post(this.$url + url, this.$qs.stringify(param))
					.then(function(response) {
						// console.log(response.data)
						that.showloading = false
						that.$Toast(response.data.msg);
						if (response.data.success) {
							that.imageUrl = ''
							that.helpid = ''
							that.info = {
								title: "",
								picUrl: "",
								html: "",
								content: "",
								typeId: that.id,
								iconId: "",
								detailId: ""
							}
							that.dialogFormVisible = false
							// const editor = that.editor
							// if (editor == null) return
							// editor.destroy() // 组件销毁时，及时销毁编辑器
							// that.editor=null

						}
						that.getlist()

					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});

			},
			del() {
				this.showloading = true
				var that = this
				var param = {
					id: this.helpid
				}
				// on confirm
				this.$http.post(this.$url + '/help/delete', this.$qs.stringify(param))
					.then(function(response) {
						// console.log(response.data)
						that.showloading = false
						that.delal = false
						that.$Toast('删除成功');
						that.getlist()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.limit = val
				this.getlist()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val
				this.getlist()
			},
			getlist() {
				this.showloading = true
				var that = this
				var param = {
					page: this.page,
					limit: this.limit,
					typeId: this.id,
					title: '',
				}
				// on confirm
				console.log()
				this.$http.get(this.$url + '/help/select?page=' + this.page + '&limit=' + this.limit + '&typeId=' + this
						.id)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						console.log(response.data.data.records)
						that.helpid = ''
						that.showloading = false
						that.list = response.data.data.records
						that.inglen = response.data.data.total
						if (that.inglen > that.limit) {
							that.num = Math.ceil(that.inglen / that.limit)
						} else {
							that.num = 1
						}
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});

			},
		}
	}
</script>

<style scoped>
	.alfoot {
		display: flex;
		justify-content: flex-end;
		padding-right: 40px;
	}

	.almain {
		padding: 40px;
	}

	.addalert {
		background: #fff;
		width: 800px;
		padding-bottom: 40px;
	}

	.alert_title_right {
		cursor: pointer;
	}

	.alert_main_title {
		width: 859px;
		margin: 0 auto 20px;
		font-size: 24px;
		color: #4286F5;
		line-height: 24px;
		border-bottom: 1px solid #E6E6E6;
		padding-bottom: 18px;
	}

	.alert_main {
		padding: 34px 40px 50px;
	}

	.alert_title_left {
		display: flex;
		align-items: center;
		font-size: 20px;
		color: #000000;
	}

	.cur {
		width: 9px;
		height: 9px;
		background: #D2D2D2;
		border-radius: 50%;
		margin-right: 10px;
	}

	.alert_title {
		height: 48px;
		background: #F8F8F8;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26px;
		position: sticky;
		top: 0;
	}

/* 	.helpalert {
		-ms-overflow-style: none !important;
	}

	.helpalert::-webkit-scrollbar {
		display: none;
	} */

	.helpalert {
		width: 960px;
		height: 688px;
		background: #FFFFFF;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		overflow-y: scroll;
	}

	.zzc {
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .2);
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 4005;
	}

	.helplist_text {
		width: 100%;
	}

	.editor—wrapper {
		border: 1px solid #ccc;
		z-index: 100;
		width: 74%;
		margin: 0 auto;
		/* 按需定义 */
	}


	.pic_l /deep/ .el-form-item__content {
		margin-left: 0 !important;
	}

	.pic_l {
		display: flex;
		align-items: center;
	}

	.avatarbox {
		width: 60px;
		height: 60px;
		border-radius: 100%;
		border: 1px solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #999;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 100%;
		object-fit: cover;
	}

	.el-input {
		max-width: 400px !important;
	}

	.helpadd {
		background-color: #fff;
		color: #4286f5;
		font-size: 16px;
	}

	.helpadd img {
		width: 28px !important;
		height: 28px;
		margin-right: 5px !important;
	}

	.helptitle_left {
		display: flex;
		align-items: center;
	}

	.helplist_info {
		font-size: 14px;
		color: #999999;
		line-height: 24px;
		width: calc(100% - 300px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.helplist_title {
		font-size: 18px;
		line-height: 24px;
		color: #333333;
	}

	.helplist_li:nth-of-type(1) {
		border-top: 1px solid #E6E6E6;
	}

	.helplist_li img {
		margin-right: 18px;
		width: 61px;
		height: 61px;
		object-fit: cover;
	}

	.helplist_li_right img {
		width: 24px;
		height: 24px;
	}

	.helplist_li_right div {
		width: 24px;
		margin-left: 20px;
		cursor: pointer;
	}

	.helplist_li_right {
		display: flex;
		align-items: center;
		width: 100px;
	}

	.helplist_li_left {
		display: flex;
		align-items: center;
		cursor: pointer;
		width: calc(100% - 100px);
	}

	.helplist_li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E6E6E6;
		padding: 22.5px 0
	}

	.helplist {
		padding: 24px 64px;
		max-height: calc(100vh - 150px);
		overflow-y: scroll;
	}

	.helptitle {
		background: url(../assets/images/helptitlebg.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 62px;
		height: 83px;
		font-size: 24px;
		color: #FFFFFF;
	}

	.helptitle_left img {
		width: 38px;
		margin-right: 16px;
	}
</style>
